# 仿赛博朋克按钮效果

# 原理

通过伪元素弄一个一样的，然后搞些文字阴影，再用clip-path的inset切割出部分块，hover的时候用动画切换这些块，再稍微做些移动就可以了。
# 源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Bebas+Neue&display=swap" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f8f005;
        }

        button,
        button::after {
            width: 380px;
            height: 86px;
            font-size: 36px;
            font-family: 'Bebas Neue', cursive;
            background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
            border: none;
            color: white;
            letter-spacing: 3px;
            line-height: 88px;
            box-shadow: 6px 0px 0px #00E6F6;
            outline: none;
            position: relative;
        }

        button::after {
            --slice-0: inset(50% 50% 50% 50%);
            --slice-1: inset(80% -6px 0 0);
            --slice-2: inset(50% -6px 30% 0);
            --slice-3: inset(10% -6px 85% 0);
            --slice-4: inset(40% -6px 43% 0);
            --slice-5: inset(80% -6px 5% 0);

            content: 'AVAILABLE NOW';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
            text-shadow: -3px -3px 0 #f8f005, 3px 3px 0 #00e6f6;
            clip-path: var(--slice-0);
            transform: translate(-20px, 10px);
        }
        button:hover::after {
            animation: glitch 1s linear infinite;
            animation-timing-function: steps(2, end);
        }

        @keyframes glitch {
            0% {
                clip-path: var(--slice-1);
                transform: translate(-20px, -10px);
            }

            10% {
                clip-path: var(--slice-3);
                transform: translate(10px, 10px);
            }

            20% {
                clip-path: var(--slice-1);
                transform: translate(-10px, 10px);
            }

            30% {
                clip-path: var(--slice-3);
                transform: translate(0px, 5px);
            }

            40% {
                clip-path: var(--slice-2);
                transform: translate(-5px, 0px);
            }

            50% {
                clip-path: var(--slice-3);
                transform: translate(5px, 0px);
            }

            60% {
                clip-path: var(--slice-4);
                transform: translate(5px, 10px);
            }

            70% {
                clip-path: var(--slice-2);
                transform: translate(-10px, 10px);
            }

            80% {
                clip-path: var(--slice-5);
                transform: translate(20px, -10px);
            }

            90% {
                clip-path: var(--slice-1);
                transform: translate(-10px, 0px);
            }

            100% {
                clip-path: var(--slice-1);
                transform: translate(0);
            }
    </style>
</head>
<body>
    <button>AVAILABLE NOW</button>
</body>
</html>
← ext仿vue mixin效果 node搭配腾讯云函数自动发邮件 →